<template>
    <div>
        <!-- <loading v-if="loadingShow" loadingStyle="height:600px;">222</loading> -->
        <div class="wrap twoSort">
            <p class="searchTitleText">
                <span v-if="modeName" v-text="modeName"></span>
                <i v-if="user.bigSortName"></i>
                <span v-if="user.bigSortName" v-text="user.bigSortName"></span>
                <i v-if="user.miniSortName"></i>
                <span v-if="user.miniSortName" v-text="user.miniSortName"></span>
                <!-- <span v-if="miniStyleName" v-text="'>'+miniStyleName"></span> -->
                <i v-show="searchOnoff" v-if="searchText=='0'?false:true"></i>
                <span v-show="searchOnoff" v-if="searchText=='0'?false:true" v-text="searchText"></span> 
                <!-- <span v-if="searchMsg&&!searchText" v-text="'>'+searchMsg"></span>          -->
            </p>
            <search @searchClick="identicalSearch" :sortObj="data[sortSearch]"></search>
            <ul class="jsSortList">
                <li class="clearfix">
                    <label class="fl">大类 :</label>
                    <ul class="jsBigSort" :class="{heightAuto:catsMore}" v-if="cats[catsId]">
                        <li :class="{sortActive:user.sortAll}" index="0" @click="user.sortAll=true,bigSortClick(0,),bigSortNameHide('');miniSortNameHide('');miniSortShow=false;bigAll()">全部</li>
                        <li v-for="(item,index) in cats[catsId]" :key="item.id" :index="item.id" @click="catsClick(item.id,index),bigSortClick(item.id,item.catname),bigSortNameShow(item.catname);miniSortShow=true;$route.query.catid2=0;" :class="{ sortActive:index==current&&user.sortAll==false}">{{item.catname}}</li>
                    </ul>
                    <button class="jsMore" @click="bigSortMore" v-show="cats[catsId]&&cats[catsId].length>13">
                        {{catsMore?"收起":"更多"}} <i class="iconfont" :class="catsMore?'icon-arrLeft-fill':'icon-triangle-down-copy'"></i>
                    </button>
                </li>
                <li class="clearfix" v-if="cats[$route.query.catid1]&&miniSortShow">
                    <label class="fl">小类 :</label>
                    <ul class="jsBigSort" :class="{heightAuto:miniCatsMore}">
                        <li :class="{sortActive:miniCatsAll}" index="0" @click="miniCatsAll=true,miniSortClick(0),miniSortNameHide('');bigAll()">全部</li>
                        <li v-for="(item,index) in cats[$route.query.catid1]" :index="item.id" :key="item.id" @click="miniCatsClick(index),miniSortClick(item.id),miniSortNameShow(item.catname)" :class="{ sortActive:index==miniCurrent&&miniCatsAll==false}">{{item.catname}}</li>
                    </ul>
                    <button class="jsMore" v-show="cats[minicatsId]&&cats[minicatsId].length>13" @click="miniSortMore">
                        {{miniCatsMore?"收起":"更多"}} <i class="iconfont" :class="miniCatsMore?'icon-arrLeft-fill':'icon-triangle-down-copy'"></i>
                    </button>
                </li>
                <li class="clearfix" v-if="style">
                    <label class="fl">风格 :</label>
                    <ul class="jsBigSort" :class="{heightAuto:styleMore}" v-if="cats[catsId]">
                        <li :class="{sortActive:styleAll}" index="0" @click="styleAll=true,styleSortClick(0),miniStyleName='';styleAllFn()">全部</li>
                        <li v-for="(item,index) in style" :inde="item.id" :key="item.id" @click="styleClick(index),styleSortClick(item.id),miniStyleName=item.catname" :class="{ sortActive:index==styleCurrent&&styleAll==false}">{{item.catname}}</li>
                    </ul>
                    <button class="jsMore" @click="styleMoreClick" v-show="style&&style.length>13">
                        {{styleMore?"收起":"更多"}}  <i class="iconfont" :class="styleMore?'icon-arrLeft-fill':'icon-triangle-down-copy'"></i>
                    </button>
                </li>
                <li class="clearfix" v-if="catsId!='6'">
                    <label class="fl">排序 :</label>
                    <ul class="jsBigSort jsBigSortShort" v-if="cats[catsId]">
                        <li :class="{sortActive:newsUpload=='更新时间'}" index="0" @click="dateChange('0');styleAllFn()">更新时间</li>
                        <li :class="{sortActive:newsUpload=='最多下载'}" index="downnum" @click="dateChange('downnum')">最多下载</li>
                        <li :class="{sortActive:newsUpload=='最多收藏'}" index="collecnum" @click="dateChange('collecnum')">最多收藏</li>
                    </ul>
                    <label class="fl" v-if="catsId!='7'">筛选 :</label>
                    <ul class="jsBigSort jsBigSortShort" v-if="cats[catsId]&&catsId!='7'">
                        <li :class="{sortActive:screen=='全部'}" index="0" @click="vipAllCilck('0');styleAllFn()">全部</li>
                        <li :class="{sortActive:screen=='VIP免费'}" index="1" @click="vipAllCilck('1')">VIP免费</li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
import search from './search/search'
import loading from './loading'
import {mapState,mapMutations,mapGetters,mapActions} from 'vuex';
export default {
    name : "twoSort",
    props:['catsId','activeClass','modeName',"searchText","sortSearch","modeUrl"],//大类的key
    data(){
        return{
            data:[
                {
                    name:"3D模型",
                    type:1,
                    url:"threeMode",
                    path:"model"
                },
                {
                    name:"SU模型",
                    type:2,
                    url:"skMode",
                    path:"sumodel"
                },
                {
                    name:"施工图",
                    type:3,
                    url:"constr",
                    path:"cad"
                },
                {
                    name:"概念方案",
                    type:4,
                    url:"concept",
                    path:"concept"
                },
                {
                    name:"高清案例",
                    type:7,
                    url:"definition",
                    path:"works"
                },
                {
                    name:"材质贴图",
                    type:6,
                    url:"czMap",
                    path:"material"
                },
            ],
            newQuery : JSON.parse(JSON.stringify(this.$route.query)),
            miniSortShow:false,//小类展示？
            loadingShow:true,
            miniStyleName:'',//风格名称
            searchOnoff : true,//搜索字符显示开关
            bigSortName:"",//大类名称
            miniSortName:"",//小类名称
            current:0,//大类class控制器
            catsAll : true,//大类全部
            catsMore:false,//大类的更多
            minicatsId:9,//小类的key
            miniCurrent:0,//小类class控制器
            miniCatsAll : true,//小类全部
            miniCatsMore : false,//小类更多
            styleCurrent:0,//样式class控制器
            uploadOnoff:true,//更新数据控制
            styleAll : true,//样式全部
            styleMore : false,//样式更多
            newsUpload : '更新时间',//排序
            searchMsg: "",//同页面搜索的内容
            screen : '全部',//筛选
            cats : {
                 
            },//大类分类
            style : [
                        {
                            "id": 394,
                            "catname": "现代",
                            "type": 8,
                            "father_id": 8,
                            "level": 2
                        },
                        {
                            "id": 396,
                            "catname": "新中式",
                            "type": 8,
                            "father_id": 8,
                            "level": 2
                        },
                        {
                            "id": 397,
                            "catname": "欧式",
                            "type": 8,
                            "father_id": 8,
                            "level": 2
                        },
                        {
                            "id": 398,
                            "catname": "北欧",
                            "type": 8,
                            "father_id": 8,
                            "level": 2
                        },
                        {
                            "id": 399,
                            "catname": "法式",
                            "type": 8,
                            "father_id": 8,
                            "level": 2
                        },
                        {
                            "id": 400,
                            "catname": "美式",
                            "type": 8,
                            "father_id": 8,
                            "level": 2
                        },
                        {
                            "id": 401,
                            "catname": "工业LOFT",
                            "type": 8,
                            "father_id": 8,
                            "level": 2
                        },
                        {
                            "id": 402,
                            "catname": "田园+地中海",
                            "type": 8,
                            "father_id": 8,
                            "level": 2
                        },
                        {
                            "id": 403,
                            "catname": "东南亚",
                            "type": 8,
                            "father_id": 8,
                            "level": 2
                        },
                        {
                            "id": 404,
                            "catname": "日式",
                            "type": 8,
                            "father_id": 8,
                            "level": 2
                        },
                        {
                            "id": 405,
                            "catname": "混搭",
                            "type": 8,
                            "father_id": 8,
                            "level": 2
                        },
                        {
                            "id": 406,
                            "catname": "其他",
                            "type": 8,
                            "father_id": 8,
                            "level": 2
                        }
                    ],//风格
        }
    },
    components:{
        search,
        loading
    },
    computed:{
        ...mapState({//登录的用户信息
            user: state => state.AuthUser
        }),
        mismatchError() {
            return this.bag.has('password:auth') && !this.errors.has('password')
        },
    },
    methods:{
        ...mapMutations(//mutations中的方法
            ["sortAllFalse","sortAllTrue","bigSortNameShow","bigSortNameHide","miniSortNameHide","miniSortNameShow"]
        ),
        bigAll(){//大类小类全部
            this.newQuery.catid2 = 0;
            this.editUrl();
            // this.$emit('bigAllMode');
        },
        styleAllFn(){//风格全部,收藏，vip
            // this.$emit('bigAllMode');
        },
        identicalSearch(n){//同页面搜索
            this.$emit("sortSearch",n);
            this.searchMsg = n;
            this.bigSortNameHide('');
            this.miniSortNameHide('');
            this.sortAllTrue();
            // this.searchOnoff=false;
            this.miniSortShow=false
            this.newQuery.keys = n;
            this.editUrl();
        },
        catsClick(id,index,msg){//点击大类
            this.minicatsId = id;//改变minicatId获取到不同的小类
            this.current = index;//控制大类的class
            this.sortAllFalse();//控制大类全部的class
            this.miniCatsAll = true;//控制小类全部class
            this.miniCatsMore = false;
       },
        bigSortClick(id,msg){//大类改变时
            this.miniSortNameHide('');
            this.newQuery.catid1 = id;
            this.newQuery.catid2 = 0;
            this.editUrl();
            // this.$emit('bigSort',id,msg);
        },
        editUrl(){//编辑url
            this.$router.push({path:this.modeUrl,query:this.newQuery})
            /* this.$router.push(this.modeUrl+"/"+this.catsId+"/"+this.$route.query.catid1+"/"+this.$route.query.catid2+"/"+this.$route.query.style+"/"+this.$route.query.id+"/"+this.$route.query.keys+"/"+this.$route.query.sort+"/"+this.$route.query.vip+'/'+this.$route.query.page) */
        },
        miniCatsClick(index){//点击小类
            this.miniCurrent = index;//控制小类的class
            this.miniCatsAll = false;//控制小类全部的class
        },
        miniSortClick(id){//小类改变时
            this.newQuery.catid2 = id;
            this.editUrl();
            // this.$emit('miniSort',id)
            
        },
        styleSortClick(id){
            this.newQuery.style = id;
            this.editUrl();
            // this.$emit('styleSort',id);
            
        },
        styleClick(index){//点击样式
            this.styleCurrent = index;//控制样式的class
            this.styleAll = false;//控制样式全部的class
        },
        bigSortMore(){//大类更多点击
            this.catsMore = !this.catsMore;
        },
        miniSortMore(){//小类更多点击
             this.miniCatsMore = !this.miniCatsMore;
        },
        styleMoreClick(){//小类更多点击
             this.styleMore = !this.styleMore;
        },
        dateChange(msg){//点击更新时间
            if(msg=="0"){
                this.newsUpload='更新时间'
            }else if(msg=="downnum"){
                this.newsUpload='最多下载'
            }else if(msg=="collecnum"){
                this.newsUpload='最多收藏'
            }
            
            this.newQuery.sort = msg;
            this.editUrl();
            // this.$emit('most',msg)
        },
        vipAllCilck(num){//点击vip排序
            if(num=="0"){
                this.screen = '全部';
            }else if(num=="1"){
                this.screen = 'VIP免费';
            }
            this.newQuery.vip = num;
            this.editUrl();
            // this.$emit('vipYn',num)
        },
        returnButton () {
            /* let vm = this;
            $(document).ready(function () {
                if (window.history && window.history.pushState) {
                    $(window).on('popstate', function () {
                        window.history.pushState('forward', null, '');
                        window.history.forward(1);
                        location.reload();
                    });
                    
                }
                window.history.pushState('forward', null, ''); //在IE中必须得有这两行
                window.history.forward(1);
            }); */
        },
    },
    watch:{
        '$route' (newValue,oldValue) {
            var This = this;
            this.$emit('bigAllMode');
            $(".jsBigSort:first li").each(function(i,e){
                if($(e).attr('index')==newValue.query.catid1){
                    $(e).addClass("sortActive");
                    This.bigSortNameShow($(e).text());
                    if(i=='0'){
                        This.bigSortNameHide('');
                    }
                }else{
                    $(e).removeClass("sortActive")
                }
            });
             $(".jsBigSort:eq(1) li").each(function(i,e){
                if($(e).attr('index')==newValue.query.catid2){
                    $(e).addClass("sortActive");
                    This.miniSortNameShow($(e).text());
                    if(i=='0'){
                        This.miniSortNameHide('');
                    }
                }else{
                    $(e).removeClass("sortActive")
                }
            });
            $(".jsBigSort:eq(2) li").each(function(i,e){
                if($(e).attr('index')==newValue.query.style){
                    $(e).addClass("sortActive")
                }else{
                    $(e).removeClass("sortActive")
                }
            });
            $(".jsBigSort:eq(3) li").each(function(i,e){
                if($(e).attr('index')==newValue.query.sort){
                    $(e).addClass("sortActive")
                }else{
                    $(e).removeClass("sortActive")
                }
            });
            $(".jsBigSort:eq(4) li").each(function(i,e){
                if($(e).attr('index')==newValue.query.vip){
                    $(e).addClass("sortActive")
                }else{
                    $(e).removeClass("sortActive")
                }
            })
        }
    },
    created(){
        this.miniSortNameHide();
        this.bigSortNameHide();
        this.sortAllTrue();
        // this.returnButton();
        axios.get('/data/create/'+this.catsId).then(response => {
            
            this.cats = response.data.cats;//大类分类
            this.style = response.data.style;//大类分类
            if(!this.activeClass.bigClass){
                this.minicatsId = response.data.cats[this.catsId][0].id
            }
            this.loadingShow = false;
            for(var i=0;i<this.cats[this.catsId].length;i++){//大分类的循环
                if(this.cats[this.catsId][i].id==this.$route.query.catid1){
                    this.current = i;
                    this.sortAllFalse();
                    this.bigSortNameShow(this.cats[this.catsId][i].catname);
                    // this.bigSortClick(this.$route.query.catid1,this.cats[this.catsId][i].catname);
                    this.miniSortShow = true;
                    this.minicatsId = this.$route.query.catid1;
                    this.catsClick(this.$route.query.catid1,i,this.cats[this.catsId][i].catname);
                    this.styleSortClick(this.$route.query.style);
                    if(this.$route.query.catid1!=0){
                        this.miniCatsMore = true;
                    }
                    
                }
            };
            
            if(this.cats[this.minicatsId]){//小分类的循环
                for(var i=0;i<this.cats[this.minicatsId].length;i++){
                    
                    if(this.cats[this.minicatsId][i].id==this.$route.query.catid2){
                        this.miniCurrent = i;//控制小类的class
                        this.miniCatsAll = false;//控制小类全部的class
                        this.miniSortShow = true;
                        this.miniSortNameShow(this.cats[this.minicatsId][i].catname);
                        // this.$emit('miniSort',this.$route.params.catid2);
                    }
                }
            };
            for(var i=0;i<this.style.length;i++){//风格的循环
                if(this.style[i].id==this.$route.query.style){
                    this.styleClick(i);
                    this.styleSortClick(this.$route.query.style)
                    this.miniStyleName=this.style[i].catname;
                }
            };
            if(this.$route.query.page=="0"){
                this.dateChange(this.$route.query.sort);//筛选分类
                this.vipAllCilck(this.$route.query.vip);//vip筛选
            }
            
            // this.identicalSearch(this.$route.params.keys)
            // this.$emit('bigAllMode');
        });
    },
    beforeMount(){
        
    },
    updated() {
        if(this.uploadOnoff){
            if(this.activeClass.bigClass){
                this.minicatsId = this.activeClass.bigClass;
                for(var i=0;i<this.cats[this.catsId].length;i++){
                    if(this.cats[this.catsId][i].id==this.activeClass.bigClass){
                        this.current = i;
                        this.sortAllFalse();
                        this.bigSortNameShow(this.cats[this.catsId][i].catname);
                        this.miniSortShow = true;
                    }
                };
                if(this.activeClass.miniClass){
                    for(var i=0;i<this.cats[this.minicatsId].length;i++){
                        if(this.cats[this.minicatsId][i].id==this.activeClass.miniClass){
                            this.miniCurrent = i;//控制小类的class
                            this.miniCatsAll = false;//控制小类全部的class
                            this.miniSortShow = true;
                            this.miniSortNameHide(this.cats[this.minicatsId][i].catname);
                        }
                    }
                }
            } 
            this.uploadOnoff = false;
        }
    },
}
</script>
<style>
    .heightAuto{
        height:auto!important;
    }
    .twoSort{
        /* height:  */
        /* padding: 0 118px 25px 126px; */
        background: #fff;
        margin-top: 14px;
        margin-bottom: 30px;
        border-radius: 5px;
    }
    .searchTitleText{
        height:70px;
        padding-top: 20px;
        color: #343434;
        padding-left: 118px;
    }
    .searchTitleText span{
        display:inline-block;
        font-size: 16px;
        line-height: 30px;
        padding: 0 10px;
        background: #f6f6f6;
        color: #333333;
        font-weight:bold;
    }
    .searchTitleText span:last-child{
        /* color: #ea514b; */
    }
    .searchTitleText i{
        display:inline-block;
        width: 9px;
        height: 8px;
        background: url(./img/link.jpg) no-repeat center;
        padding: 0 9px;
    }
    .twoSort .tzSearch{
        padding: 0;
        text-align: left;
    }
    .twoSort .tzSearch input{
        width: 690px;
    }
    .twoSort .headInfo{
        height: 42px;
        width:100%;
        padding-left:190px;
    }
    .jsBigSort{
        float: left;
        width: 930px;
        height: 30px;
        overflow: hidden;
    }
    .jsBigSortShort{
        width: 296px;
    }
    .jsBigSort li{
        float: left;
        padding: 0 7px;
        border-radius: 2px;
        margin-right: 20px;
        line-height: 30px;
        color: #666;
    }
    .jsSortList{
        font-size: 12px;
        line-height: 20px;
        padding-top: 44px;
    }
    .jsBigSort li{
        cursor: pointer;
    }
    .jsSortList>li{
        margin-top: 20px;
        padding: 0 100px 0 126px;
    }
    .jsSortList>li:last-child{
        padding-bottom: 25px;
        border-top: 1px solid #f5f5f5;
        padding-top: 16px;
    }
    .jsSortList label{
        font-weight: bold;
        margin-right: 20px;
        line-height:28px;
        color: #444;
    }
    .jsMore{
        float: right;
         font-size: 12px;
        line-height: 28px;
        background: transparent;
        padding: 0;
        border: none;
        outline: none;
        font-weight: bold;
    }
    .sortActive{
        color: #fff!important;
        background: #ea514b;
    }
</style>